<template>
    <n-card class="w-400px">
        <n-form>
            <n-form-item label="名称">
                <n-input v-model:value="roomSearchContent.name" maxlength="20">
                </n-input>
            </n-form-item>
            <n-grid :cols="2" :x-gap="10">
                <n-form-item-gi label="面积">
                    <n-input-number
                        v-model:value="roomSearchContent.area"
                        min="0"
                    >
                    </n-input-number>
                </n-form-item-gi>
                <n-form-item-gi label="座位数">
                    <n-input-number
                        v-model:value="roomSearchContent.capacity"
                        min="0"
                    >
                    </n-input-number>
                </n-form-item-gi>
            </n-grid>
            <n-form-item label="设备支持">
                <n-select
                    v-model:value="deviceSelected"
                    multiple
                    placeholder="选择会议室设备"
                    :options="roomDeviceOptions"
                ></n-select>
            </n-form-item>
            <n-grid :cols="2" :x-gap="10">
                <n-form-item-gi label="类型">
                    <n-select
                        v-model:value="roomSearchContent.type"
                        :options="roomTypeOptions"
                        placeholder="选择会议室类型"
                    ></n-select>
                </n-form-item-gi>
                <n-form-item-gi label="状态">
                    <n-select
                        v-model:value="roomSearchContent.status"
                        :options="roomStatueOptions"
                        placeholder="选择会议室状态"
                    ></n-select>
                </n-form-item-gi>
            </n-grid>
        </n-form>
        <template #footer>
            <div class="w-full flex justify-end gap-10px">
                <n-button @click="handleResetParams">重置</n-button>
                <n-button type="primary" @click="handleSubmitParams">
                    搜索
                </n-button>
            </div>
        </template>
    </n-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { MeetingRoomSearchParams } from "@/service/api/types/room";

import { cloneDeep } from "lodash";

const props = defineProps<{
    searchParams: MeetingRoomSearchParams;
}>();

const emits = defineEmits<{
    (e: "filter-params", value: MeetingRoomSearchParams): void;
}>();

const roomDeviceOptions = [
    {
        label: "扬声器",
        value: "speaker",
    },
    {
        label: "互联网",
        value: "internet",
    },
    {
        label: "投影仪",
        value: "projector",
    },
];

const roomStatueOptions = [
    {
        label: "正常",
        value: "normal",
    },
    {
        label: "维修中",
        value: "maintain",
    },
];

const roomTypeOptions = [
    {
        label: "教室型",
        value: "classroom",
    },
    {
        label: "圆桌型",
        value: "roundtable",
    },
];

const deviceSelected = ref<string[]>([]);

const roomSearchContent = ref<MeetingRoomSearchParams>({
    name: "",
    area: 0,
    capacity: 0,
    device: {
        speaker: false,
        projector: false,
        internet: false,
    },
    status: null,
    type: null,
});

onMounted(() => {
    roomSearchContent.value = cloneDeep(props.searchParams);
    Object.entries(props.searchParams.device!).forEach(([key, value]) => {
        if (value) {
            deviceSelected.value.push(key);
        }
    });
});

const handleResetParams = () => {
    roomSearchContent.value = {
        name: "",
        area: 0,
        capacity: 0,
        device: {
            speaker: false,
            projector: false,
            internet: false,
        },
        status: null,
        type: null,
    };
    deviceSelected.value = [];
};

const handleSubmitParams = () => {
    roomSearchContent.value.device = {
        speaker: deviceSelected.value.includes("speaker"),
        projector: deviceSelected.value.includes("projector"),
        internet: deviceSelected.value.includes("internet"),
    };
    emits("filter-params", roomSearchContent.value);
};
</script>

<style scoped></style>
